<template>
  <div class="outter">
    <a-spin :spinning="spinning">
      <a-tabs default-active-key="未完成" @change="tabChange">
        <a-tab-pane key="未完成" tab="未完成" class="tab">
          <div class="contentOrder">
            <div v-if="order.length == 0" class="emptyBox">
              已经完成所有订单啦！
            </div>
            <div v-else class="box" v-for="item in order" :key="item.num">
              <div class="tablenum">{{ item.table }}</div>
              <div class="order">
                <div class="remark">
                  备注:{{ item.remark === "" ? "无" : item.remark }}
                </div>
                <a-checkbox-group
                  v-model="item.selected"
                  :options="item.options"
                  @change="onChange(item)"
                />
              </div>
              <div
                :class="item.checkAll === true ? 'orderfinsh' : 'orderdetail'"
              >
                <div class="ordernum">by {{ item.chiefName }}</div>
                <div class="ordernum">订单号：{{ item.num }}</div>
                <div class="ordernum">订单时间:{{ item.time }}</div>
                <div class="state">
                  {{ item.checkAll === true ? "已完成" : "未完成" }}
                </div>
              </div>
              <a-popconfirm
                title="确定删除这个订单吗?"
                ok-text="确定"
                cancel-text="取消"
                @confirm="deleteConfirm(item)"
                ><a href="#"><a-icon type="close" /></a
              ></a-popconfirm>
            </div>
          </div>
        </a-tab-pane>
        <a-tab-pane key="已完成" tab="已完成" class="tab">
        <div class="message">以下订单信息可在区块链中比对相应数据，确保去中心化，不可篡改，保护订单信息安全。</div>
          <a-range-picker
            v-model="time"
            class="datePicker"
            :placeholder="['开始时间', '结束时间']"
            @change="dateChange"
          />
          <a-button class="resect" @click="resect">重置</a-button>
          <div class="contentOrder">
            <div class="box" v-for="item in order" :key="item.num">
              <div class="tablenum">{{ item.table }}</div>
              <div class="order">
                <a-checkbox-group
                  v-model="item.selected"
                  :options="item.options"
                  @change="onChange(item)"
                  disabled
                />
              </div>
              <div class="orderfinsh">
                <div class="ordernum">by {{ item.chiefName }}</div>
                <div class="ordernum">订单号：{{ item.num }}</div>
                <div class="ordernum">订单时间:{{ item.time }}</div>
                <div class="state">已完成</div>
              </div>
              <a-popconfirm
                title="确定删除这个订单吗?"
                ok-text="确定"
                cancel-text="取消"
                @confirm="deleteConfirm(item)"
                ><a href="#"><a-icon type="close" /></a
              ></a-popconfirm>
            </div>
          </div>
          <a-pagination
            v-model="current"
            :pageSize="pageSize"
            :total="total"
            show-less-items
            show-quick-jumper
            class="pagination"
          />
        </a-tab-pane>
      </a-tabs>
    </a-spin>
    <a-back-top :visibilityHeight="200" />
  </div>
</template>

<script>
import {
  getOrderByPage,
  deleteOrder,
  orderChange,
  searchOrder,
  getAllOrder,
  getUnfinishedOrder,
} from "@/api/orderItem";
export default {
  data() {
    return {
      current: 1,
      checkAll: false,
      order: [],
      spinning: true,
      key: "未完成",
      total: 10,
      pageSize:10,
      time:""
    };
  },
  created() {
    this.getUnfinshed();
    this.initWebSocket();
  },
  watch: {
    current(value) {
      this.getFinshed();
    },
  },
  methods: {
    initWebSocket: function () {
      // WebSocket与普通的请求所用协议有所不同，ws等同于http，wss等同于https
      var url = "wss://miswestrestaurant.xyz/websocket";
      this.websock = new WebSocket(url);
      this.websock.onopen = this.websocketonopen;
      this.websock.onerror = this.websocketonerror;
      this.websock.onmessage = this.websocketonmessage;
      this.websock.onclose = this.websocketclose;
    },
    websocketonopen: function () {
      console.log("WebSocket连接成功");
    },
    websocketonerror: function (e) {
      console.log("WebSocket连接发生错误");
    },
    websocketonmessage: function (e, data) {
      console.log("WebSocket接受消息");
      console.log(e);
      if (e.data === "新订单！" && this.key == "未完成") {
        this.getUnfinshed();
      }
    },

    destroyed: function () {
      // 离开页面生命周期函数
      this.websocketclose();
    },
    resect(){
      this.getFinshed()
    },
    getUnfinshed() {
      this.time=[]
      this.pageSize=10
      this.spinning = true;
      getUnfinishedOrder().then((res) => {
        res.data.map((item) => {
          item.options = item.option;
          item.time = item.orderTime;
          item.num = item.orderNo;
          item.table = item.seatNo;
          item.checkAll=item.cheackAll
        });
        this.order = res.data;
        this.spinning = false;
      });
    },
    getFinshed() {
      this.pageSize=10
      this.time=[]
      this.spinning = true;
      getOrderByPage({ pageSize: 10, pageNum: this.current }).then((res) => {
        this.total = res.data.total;
        let arr=[]
        res.data.list.map((item) => {
          item.options = item.option;
          item.time = item.orderTime;
          item.num = item.orderNo;
          item.table = item.seatNo;
          item.checkAll=item.cheackAll
          if(item.checkAll===true){
            arr.push(item)
          }
        });
        this.order =arr;
        this.spinning = false;
        console.log(res)
      })
    },
    deleteConfirm(item) {
      deleteOrder({ orderNo: item.orderNo }).then((res) => {
        if (res.code === 200) {
          this.$message.success("成功删除");
          if (this.key === "未完成") {
            this.getUnfinshed();
          } else {
            this.getFinshed();
          }
        }
      });
    },
    dateChange(date, dateString) {
      this.spinning = true;
      searchOrder({
        startTime: dateString[0] + "",
        endTime: dateString[1] + "",
      }).then((res) => {
        let arr=[]
        this.total = res.data.length;
        this.pageSize=res.data.length
        this.current=1
        res.data.map((item) => {
          item.options = item.option;
          item.time = item.orderTime;
          item.num = item.orderNo;
          item.table = item.seatNo;
          item.checkAll=item.cheackAll
          if(item.checkAll===true){
            arr.push(item)
          }
        });
        this.order =arr;
        this.spinning = false;
      });
    },
    tabChange(key) {
      if (key === "未完成") {
        this.getUnfinshed();
        this.key = "未完成";
      } else {
        this.getFinshed();
        this.key = "已完成";
      }
    },
    onChange(item) {
      item.checkAll = item.selected.length === item.options.length;
      if (item.selected.length !== 0) {
        orderChange({ orderNo: item.orderNo, selected: item.selected }).catch(
          (err) => {
            console.log(err);
          }
        );
      }
    },
  },
};
</script>

<style scoped>
.message{
    padding: 11px 38px;
    margin: 0px 0px 50px 100px;
    text-align: center;
    font-size: 15px;
    color: rgb(240, 242, 245);
    background-color: rgb(44, 44, 44);
    border-radius: 15px;
    display: inline-block;

}
.remark {
  margin: 10px 0;
}
.pagination {
  float: right;
}
.datePicker {
  margin: 0px auto 20px;
  width: 30%;
  display: block;
}
.emptyBox {
  text-align: center;
  font-size: 20px;
}
.outter {
  width: 100%;
  padding: 0px 5px;
}
.contentOrder {
  padding: 30px;
}
.box {
  border-radius: 20px;
  width: 90%;
  margin: 0 auto 30px;
  height: 125px;
  display: flex;
  flex-direction: row;
}
.tablenum {
  width: 18%;
  text-align: center;
  line-height: 125px;
  font-size: 28px;
  color: white;
  background-color: rgb(44, 44, 44);
  border-radius: 20px 0 0 20px;
}
.order {
  width: 50%;
  padding: 20px;
  overflow: scroll;
  background-color: white;
  border-radius: 0 30px 30px 0;
}
.orderdetail {
  width: 32%;
  padding: 10px;
  background-color: rgb(44, 44, 44);
  color: white;
  overflow: scroll;
  border-radius: 20px;
}
.orderfinsh {
  width: 32%;
  padding: 10px;
  background-color: white;
  color: rgb(44, 44, 44);
  overflow: scroll;
  border-radius: 20px;
}
.ordernum {
  text-align: center;
  font-size: 15px;
}
.state {
  width: 40%;
  line-height: 20px;
  border-radius: 20px;
  text-align: center;
  font-size: 19px;
  margin: 5px auto;
  font-weight: 900;
}
.resect{
  margin: 0 auto;
  display: block;
}
</style>
